<template>
  <div>
  <div ref="display" class="wrap-display">
    <div ref="navbar" class="navbar"><nav-bar1></nav-bar1></div>
    <loading v-show="!rightKey.length"></loading>
    <div class="main"></div>
    <div
      class="panel-img-list singer-img-list"
      v-for="(singers,index) in songerList" :key="index">
      <p
       :class="{active : singers.title === isShow}"
        class="key"
        ref="key">
        {{singers.title}}
      </p>
      <ul v-for="singer in singers.items" :key="singer.id">
        <li class="list_li">
          <a @click="_thisSingsrClick(singer)">
            <div class="panel-img-left">
              <img v-lazy="singer.avatar">
            </div>
            <div class="panel-img-content">
              <p class="panel-img-content-first">{{singer.name}}</p>
            </div>
          </a>
          </li>
        </ul>
      </div>
      <div class="main"></div>
      <ul class="rightkey">
        <li
          @touchmove.prevent="handleTouchMove"
          @click="_thisKeyClick($event, item)"
          class="rightkeyli"
          v-for="(item,index) in rightKey"
          :key="index"
          :class="{active: item === isShow}">
          {{item}}
        </li>
      </ul>
    <tab-bar></tab-bar>
   </div>
   <keep-alive>
     <router-view/>
   </keep-alive>
  </div>
</template>

<script>
import { Singer } from 'common/singer'
import { ERR_OK } from 'api/config'
import { GetSingr1 } from 'api/singer'
import tabBar from '../base/tabBar'
import loading from '../base/Loading'
import { mapMutations } from 'vuex'
import NavBar1 from '../base/NavBar1'
export default {
  name: 'singer',
  components: {
    tabBar,
    loading,
    NavBar1
  },
  data () {
    return {
      songerList: {},
      loading: false,
      rightKey: [],
      scrollTop: 0,
      isShow: '热'
    }
  },
  created() {
    this._getSingerList()
  },
  mounted() {
    window.addEventListener('scroll', this.windowScrollTop)
    this._FirstinTo()
  },
  watch: {
    songerList() {
      var rightKey = []
      this.songerList.forEach((item) => {
        if (item.title.length > 1) {
          item.title = item.title.slice(0, 1)
        }
        rightKey.push(item.title)
      })
      this.rightKey = rightKey
    },
    $route(to, from) {
      var path = to.path
      var Elg = /singer$/
      if (path.match(Elg)) {
        this.$refs.display.style.display = 'block'
      }
    }
  },
  methods: {
    ...mapMutations({
      setSinger: 'SET_SINGER'
    }),
    _FirstinTo() {
      var herf = window.location.href
      var Elg = /singer$/
      if (herf.match(Elg)) {
        this.$refs.display.style.display = 'block'
      }
    },
    _thisSingsrClick(singer) {
      this.$refs.display.style.display = 'none'
      this.$router.push({
        path: `/singer/${singer.id}`
      })
      this.setSinger(singer)
    },
    handleTouchMove(e) {
      var height = e.target.parentNode.childNodes[0].offsetHeight // 获取每个li的高度
      var clientY = e.changedTouches[0].clientY // 获取鼠标滑动到的位置距离屏幕顶端的距离
      var re = e.target.parentNode.offsetTop + e.target.parentNode.childNodes[0].offsetTop// 获取第一个li距离屏幕顶端的距离
      var client = clientY - re // 获取滑动位置与第一个li的距离
      var index = Math.floor(client / height) // 计算滑动到第几个li
      var key = this.$refs.key
      this.rightKey.forEach((item, ind) => {
        if (ind === index) { // 当滑动到某个li时
          var show = e.target.parentNode.childNodes[index].innerText // 获取li中的innerHtml
          this.isShow = show // 把li中的innerHtml赋值给isShow,实现右侧字母滑动时变色
          key.forEach((item) => { // 遍历主列表
            if (item.innerText === show) { // 当主列表头中的字母和show相同时
              window.scrollTo(0, item.parentNode.offsetTop - 46) // 让屏幕滑动到这个字母父元素的offsetTop的位置
            }
          })
        }
      })
    },
    windowScrollTop() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var key = this.$refs.key
      key.forEach((item) => {
        if (item.offsetTop === scrollTop + 46) {
          this.isShow = item.innerText
        }
      })
    },
    _thisKeyClick($e, e) {
      var key = this.$refs.key
      key.forEach((item) => {
        if (item.innerText === e) {
          window.scrollTo(0, item.parentNode.offsetTop - 46)
          this.isShow = e
          // 原生js实现ios设备失效，所以直接用的vue的动态绑定class实现点击字母字母变色
          // $e.path[0].classList.add('active')
          // var borther = $e.path[0].parentNode.children
          // var bs = []
          // for (var i in borther) {
          //   if (borther[i].innerText !== $e.path[0].innerText) {
          //     bs.push(borther[i])
          //   }
          // }
          // bs.splice(bs.length - 3, 3)
          // bs.forEach((item) => {
          //   item.classList.remove('active')
          // })
        }
      })
    },
    _getSingerList() {
      GetSingr1().then((res) => {
        if (res.code === ERR_OK) {
          this.songerList = this._resetList(res.data.list)
        }
      })
    },
    _resetList(list) {
      const HOT_NAME = '热门'
      var map = {
        hot: {
          title: HOT_NAME,
          items: []
        }
      }
      list.forEach((item, index) => {
        if (index < 10) {
          map.hot.items.push(new Singer({
            id: item.Fsinger_mid,
            name: item.Fsinger_name
          }))
        }
        if (index > 10) {
          var key = item.Findex
          if (!map[key]) {
            map[key] = {
              title: key,
              items: []
            }
          }
          map[key].items.push(new Singer({
            id: item.Fsinger_mid,
            name: item.Fsinger_name
          }))
        }
      })
      var hot = []
      var ret = []
      for (var key in map) {
        if (map[key].title.match(/[a-z|A-Z]/)) {
          ret.push(map[key])
        } if (map[key].title === HOT_NAME) {
          hot.push(map[key])
        }
      }
      ret.sort((a, b) => {
        return a.title.charCodeAt(0) - b.title.charCodeAt(0)
      })
      return hot.concat(ret)
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
  .list_li{
    list-style-type: none;
  }
  .panel-img-list li a {
    display: block;
    position: relative;
    margin-left: .3rem;
    padding: .3rem 0rem .3rem 3rem;
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none;
    padding-left: 1.5rem;
}
  .singer-img-list .panel-img-left {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: .3rem;
    left: 0;
  }
  .panel-img-left img {
    width: 100%;
    border-radius: 50%;
  }
  .singer-img-list .panel-img-content {
    height: 1rem;
    line-height: 1rem;
    display: block;
    font-size: .4rem;
    color: #333;
  }
  .key{
    background: #F0F0F0;
    font-size: .4rem;
    color: #7F8080;
    height: .6rem;
    line-height: .6rem;
    padding-left: .3rem;
    position: -webkit-sticky;
    position: sticky;
    top: 46px;
    z-index: 1;
  }
  .rightkey{
    position: fixed;
    bottom: 15%;
    right: -.1%;
    text-align: center;
    background: #F0F0F0;
    border-radius: 30px;
    z-index: 2;
    font-size: .3rem;
    padding: 2% 1%;
  }
  .rightkeyli{
    width: .3rem;
    height: .5rem;
    color: #7F8080;
    line-height: .5rem;
    cursor: pointer;
  }
  .active{
    color: #31C27C;
  }
  .wrap-display{
    display: none;
  }
  .main{
    height: 46px;
  }
</style>
